<template>
  <div class="sign-page" >
    <div class="back" @click="goContent(item,'/signUp')">
      <img src="@/assets/image/md-arrow_back.svg" />
    </div>
    <div class="top">
      <div class="title">
        考试报名
      </div>
      <div class="hr"></div>
    </div>

    <div class="info">
      <div class="oneinfo">
        <div class="info_title">
          考试信息
        </div>
        <div class="info_content">
          <div class="one_item">
            <div class="left_item">考试名称</div>
            <div class="right_item" :title="paperList.name" style="font-size: 20px;">{{paperList.name}}</div>
          </div>
          <div class="one_item">
            <div class="left_item">考试状态</div>
            <div class="right_item" style="font-size: 16px;color: #FF0000;">正在报名</div>
          </div>
          <div class="one_item">
            <div class="left_item">报名时间</div>
            <div class="right_item" style="font-size: 16px;#605E5E">{{paperList.baomingStartTime}}&nbsp;&nbsp;至&nbsp;&nbsp;{{paperList.baomingEndTime}}</div>
          </div>
          <div class="one_item">
            <div class="left_item">考试时间</div>
            <div class="right_item" style="font-size: 16px;#605E5E">{{paperList.startTime}}&nbsp;&nbsp;至&nbsp;&nbsp;{{paperList.endTime}}</div>
          </div>
        </div>
      </div>
      <div class="oneinfo">
        <div class="info_title">
          考生信息
        </div>
        <div class="kaosheng_xinxi">
          <div class="one_item">
            <div class="left_item">姓名</div>
            <div class="right_item"style="font-size: 20px;">
              <el-input v-model="name"></el-input>
            </div>
          </div>
          <div class="one_item">
            <div class="left_item">性别</div>
            <div class="right_item" style="font-size: 16px;color: #FF0000;">
              <el-input v-model="sexLabel" disabled="disabled"></el-input>
            </div>
          </div>
          <div class="one_item">
            <div class="left_item">身份证</div>
            <div class="right_item" style="font-size: 16px;#605E5E">
                 <el-input  v-model="shenfenzheng"></el-input>
            </div>
          </div>
          <div class="one_item">
            <div class="left_item">手机号码</div>
            <div class="right_item" style="font-size: 16px;#605E5E">
              <el-input  v-model="phone" type="number" oninput="if(value.length>11)value=value.slice(0,11)"></el-input>
            </div>
          </div>
        </div>
      </div>
<!--      <div class="exam-info">
       <div class="examinfo">
          <span class="name" :title="paperList.name">{{paperList.name}}</span>
          <div>
            <span class="baoming">正在报名</span><span class="num">已报名人数：{{paperList.userKaoshiCount}} 人</span>
          </div>
          <span class="stoptime">报名截止时间:&nbsp;&nbsp;{{paperList.baomingEndTime}}</span>
          <span class="examtime">考试时间:&nbsp;&nbsp;{{paperList.startTime}}</span>
        </div>
      </div>

      <div class="examinee-info">
        <div class="kaosheng-icon">
          <span class="kaosheng">考生信息</span>
        </div>

        <div class="input-info">
          <div class="info1">
            <span>姓名</span><input disabled="disabled" v-model="name" />
          </div>
          <div class="info1">
            <span>身份证</span><input disabled="disabled" v-model="shenfenzheng" />
          </div>
          <div class="info1">
            <span>手机号</span><input v-model="phone"  type="number" oninput="if(value.length>11)value=value.slice(0,11)"/>
          </div>
        </div>
      </div> -->
    </div>
    <div class="submit" @click="save">
      <span>提交报名信息</span>
    </div>
  </div>


</template>

<script>
import 'babel-polyfill'
import Pagination from '@/components/pagination.vue'
import Cookies from 'js-cookie'
import nodata from '@/components/nodata.vue'
import $ from "jquery"
import { Notification } from 'element-ui';
export default {

    components: {
        'ui-pagination':Pagination,
        nodata
    },
    data(){
        return{
          // id:"1400261019549147136",
          paperList:[],
          name:'',
          shenfenzheng:'',
          userData:[],
          phone:'',
          kaoshiId:'',
          sexLabel:'',
        }
    },
    created(){
      if( Cookies.get('userData')){
          this.userData = JSON.parse(Cookies.get('userData'))

          this.name = this.userData.nickName;
          this.shenfenzheng = this.userData.property1.idCard;
          this.phone = this.userData.mobile;
          this.sexLabel = this.userData.sexLabel;
          console.log(this.userData.property1.idCard)
      }

      this.getData();
    },
    mounted(){

    },
    methods:{
        getSex(event){
          console.log(event,555)
          // this.sex = event
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },
        goPage(){

        },
        goContent(item,url){
            this.$router.push(url);
        },
        pageChange(index){

        },
        getData(){
          let list;
          list = this.$route.params;
          console.log(list)
          this.kaoshiId = list.id;
          this.paperList = list;
        },
        save(){
          let that = this;
          if(this.phone==""){
              Notification.warning({
                title:'提示',
                message:"请输入手机号"
              });
              return;
          }
          else if(!(/^1[3456789]\d{9}$/.test(this.phone))){
              Notification.warning({
                title:'提示',
                message:"请输入正确的手机号"
              });
              return;
          }
          let url ="/f/saveUserKaoshiJoin"
          this.$axios.$get(url+"?kaoshiId="+this.kaoshiId+"&mobile="+this.phone)
          .then(function (response) {
                that.$confirm('报名成功！', '提示', {
                  confirmButtonText: '确定',
                  showCancelButton:false,
                  type: 'warning'
                }).then(() => {
                  that.$router.push('/signUp');
                }).catch(() => {

                });
          })
          .catch(function (error) {
            console.log(error);
          })
        }

    }
}
</script>

<style lang="less">
   .sign-page{
     width: 100%;
     height: 100%;
     position: relative;
     margin-top: 10px;
     display: flex;
     flex-direction: column;
      align-items: center;
     .top {
       width: 100%;
       // height: 40px;
       display: flex;
       flex-direction: column;
       align-items: center;

       .title {
         // width: 100%;
         font-size: 24px;
         color: #0076CA;
       }

       .hr {
         width: 100px;
         height: 4px;
         background-color: #0076CA;
       }
     }
     .back{
       position: absolute;
       width: 29px;
       height: 29px;
       top: 5px;
       left: 29px;
       cursor: pointer;
       img{
         width: 100%;
         height: 100%;
       }
     }
     .info{
       margin-top: 20px;
       width: 900px;
       // height: 535px;
       line-height: 23px;
       background-color: rgba(239, 250, 255, 100);
       text-align: center;
       border: 1px solid rgba(255, 255, 255, 100);
       .oneinfo{
          width: 100%;
          .info_title{
            width: 100%;
            background-color: #0076ca;
            color: white;
            font-size: 18px;
            height: 45px;
            line-height: 45px;
            text-align: left;
            font-weight: bold;
            padding: 0 20px;
          }
          .info_content{
            width: 100%;
            display: flex;
            padding: 10px 30px;
            flex-direction: column;
            .one_item{
              width: 100%;
              display: flex;
              height: 40px;
              line-height: 40px;
              .left_item{
                color: #0076ca;
                font-size: 16px;
                margin-right: 20px;
              }
              .right_item{

              }
            }
          }
          .kaosheng_xinxi{
            width: 100%;
            display: flex;
            padding: 30px 30px;
            flex-wrap: wrap;
            .one_item{
              width: 50%;
              display: flex;
              height: 40px;
              line-height: 40px;
              .left_item{
                width: 64px;
                color: #0076ca;
                font-size: 16px;
                margin-right: 20px;
                text-align: left;
              }
              .right_item{
                input{
                  height: 30px;
                  background-color: white;
                  border:1px solid #e8edf6;
                }
              }
            }
          }
       }
       .exam-info{
         width: 100%;
         display: flex;
         img{
           margin-top: 10px;
           margin-left: 28px;
           width: 71px;
           height: 83px;
         }
         .examinfo{
           width: 100%;
           margin-left:33px ;
           display: flex;
           flex-direction: column;
           justify-content: space-around;
           align-items: flex-start;
           .name{
             cursor: pointer;
             width: 400px;
             display: inline-block;
             overflow:hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
             margin-top: 17px;
              height: 28px;
              color: rgba(16, 16, 16, 100);
              font-size: 20px;
              text-align: left;
              font-family: PingFangSC-regular;
           }
           div{
             margin-top: 17px;
             width:calc(100% - 171px);
             display: flex;
             justify-content: space-between;
               .baoming{
                height: 22px;
                color: rgba(242, 45, 45, 100);
                font-size: 16px;
                text-align: left;
                font-family: PingFangSC-regular;
             }
             .num{
                height: 20px;
                color: rgba(157, 155, 155, 100);
                font-size: 14px;
                text-align: left;
                font-family: PingFangSC-regular;
             }
           }
           .stoptime{
              margin-top: 40px;
              height: 22px;
              color: rgba(57, 158, 228, 100);
              font-size: 16px;
              text-align: left;
              font-family: PingFangSC-regular;
           }
           .examtime{
              margin-top: 28px;
              height: 22px;
              color: rgba(57, 158, 228, 100);
              font-size: 16px;
              text-align: left;
              font-family: PingFangSC-regular;
           }
         }

       }
       .line{
         margin-left:34px;
         margin-right: 33px;
         margin-top:47px ;
         // width: 100%;
         height: 1px;
         border: 1px solid rgba(187, 187, 187, 100);
       }
       .examinee-info{
          width: 100%;
         .kaosheng-icon{
           width: 100%;
           padding-left:34px;
           display: flex;
           img{
             width: 71px;
             height: 80px;
             margin-top: 24px;
           }
           .kaosheng{
             margin-top: 40px;
             margin-left: 25px;
             width: 80px;
             height: 28px;
             color: rgba(16, 16, 16, 100);
             font-size: 20px;
             text-align: left;
             font-family: PingFangSC-regular;
           }
         }
        .input-info{
          margin-top: 27px;
          height: 150px;
          width: 50%;
          margin-left: 132px;
          margin-right: 191px;
          .info1{
            display: flex;
            justify-content: space-between;
            margin-top: 11px;
            span{
              color: rgba(57, 158, 228, 100);
              font-size: 16px;
              text-align: left;
              font-family: SourceHanSansSC-bold;
              font-weight: bold;
            }
            input{
            width: 200px;
            height: 30px;
            color: rgba(136, 136, 136, 100);
            font-size: 14px;
            text-align: left;
            font-family: Microsoft Yahei;
            border: 1px solid rgba(187, 187, 187, 100);
            }
          }

        }

       }

     }
     .submit{
       cursor: pointer;
       margin-top: 40px;
       width: 140px;
       height: 39px;
       border-radius: 4px;
       background-color: rgba(57, 158, 228, 100);
       text-align: center;
       line-height: 39px;
       border: 1px solid rgba(187, 187, 187, 100);
      span{
        width: 108px;
        height: 27px;
        color: rgba(253, 253, 255, 100);
        font-size: 18px;
        text-align: left;
        font-family: SourceHanSansSC-bold;
      }
     }
   }


</style>
